@use "../abstracts/variables.scss" as *;
@use "../abstracts/mixins.scss" as *;

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    animation: fadein 0.2s;
    table-layout: auto;

    tr {
        background-color: white;
    }

    thead {
        color: white;

        tr {
            th {
                background-color: $color-primary;
                font-weight: 500;
                padding: 9px;
                text-align: center;
                width: auto;

                &:first-child {
                    border-top-left-radius: $border-radius;
                    border-bottom-left-radius: $border-radius;
                }

                &:last-child {
                    border-top-right-radius: $border-radius;
                    border-bottom-right-radius: $border-radius;
                }
            }
        }
    }

    tbody {
        tr {
            @include transition(background-color, .1);

            &:nth-child(even) {
                // background-color: getColor("gray30");
            }

            &:hover {
                background-color: $color-gray-light;
            }

            td {
                font-weight: 500;
                padding: 10px;
                border-top: 2px solid $color-gray-light;
                border-bottom: 2px solid $color-gray-light;
                text-align: center;
                white-space: nowrap;

                .action {
                    display: flex;
                    align-items: center;

                    >* {
                        margin-right: 10px;

                        &:last-child {
                            margin-right: unset !important;
                        }
                    }
                }

                &.side-head {
                    background-color: $color-gray-light;
                }

                &:first-child {
                    border-left: 2px solid $color-gray-light;
                    border-top-left-radius: $border-radius;
                    border-bottom-left-radius: $border-radius;
                }

                &:last-child {
                    border-right: 2px solid $color-gray-light;
                    border-top-right-radius: $border-radius;
                    border-bottom-right-radius: $border-radius;
                }
            }

            &.warning {
                background-color: #FFFAEC;

                &:hover {
                    background-color: #f9f3df;
                }

                td {
                    border-color: #FFB800;
                }
            }
        }

        tr.selected {
            background-color: rgba($color: $color-primary, $alpha: 0.15);

            td {
                border-top-color: $color-primary;
                border-bottom-color: $color-primary;

                &:first-child {
                    border-left-color: $color-primary;
                }

                &:last-child {
                    border-right-color: $color-primary;
                }
            }
        }
    }
}